<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .playerimg,
        .outer {
            border-radius: 10px;
            border: rgba(0, 0, 0, .12) solid 1px;
            display: inline-block;
            line-height: 20px;
        }

        .teamimg {
            width: 16px;
            height: 16px;
        }

        .font_center {
            text-align: center;
        }

        .font_size10 {
            font-size: 10px;
        }

        .font_size14{
            font-size: 14px;
        }
        .font_color {
            color: #70757a;
        }

        #container {
            /* 水平居中 */
            /* margin: 0 auto; */

            /* 水平+垂直居中 */
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            position: absolute;

            width: 238px;
            height: 114px;

            display: table;
            word-spacing: -1em;
        }

        #abc {
            margin-left: 10px;
        }

        .img_size {
            width: 112px;
            height: 112px;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="curry" class="outer img_size font_size14" >
            <img src=""
                alt="" class="playerimg">
            <div class="font_center">Curry</div>
            <div class="font_center font_size10 font_color">控球后卫</div>
            <div class="font_center">
                <img src="https://ssl.gstatic.com/onebox/media/sports/logos/ovwlyYHRKZ90s7zn_qlMCg_48x48.png" alt=""
                    class="teamimg">
                <span class="font_center font_size10 font_color">金州勇士</span>
            </div>
        </div>

        <div id="abc" class="outer img_size font_size14">
            <img src=""
                alt="" class="playerimg">
            <div class="font_center font_size14">字母哥</div>
            <div class="font_center font_size10 font_color">前锋</div>
            <div class="font_center">
                <img src="https://ssl.gstatic.com/onebox/media/sports/logos/Wd6xIEIXpfqg9EZC6PAepQ_48x48.png" alt=""
                    class="teamimg" id="test">
                <span class="font_center font_size10 font_color">密尔沃基雄鹿</span>
            </div>
        </div>
    </div>
    <p> © 版权由林雷豪归属,未经允许不得复制、镜像</p>

    <script>
        function Star(name, position, team, playerimgurl, teamimgurl) {
            this.name = name
            this.position = position
            this.team = team
            this.playerimgurl = playerimgurl
            this.teamimgurl = teamimgurl
        }
        var curryImg = "";

        var curryTeamImg = "https://ssl.gstatic.com/onebox/media/sports/logos/ovwlyYHRKZ90s7zn_qlMCg_48x48.png";

        var curry = new Star("Curry", "控球后卫", "金州勇士", curryImg, curryTeamImg);

        var abcImg = "";

        var abcTeamImg = "https://ssl.gstatic.com/onebox/media/sports/logos/Wd6xIEIXpfqg9EZC6PAepQ_48x48.png";

        var abc = new Star('字母哥', '前锋', '密尔沃基雄鹿', abcImg, abcTeamImg);

        document.getElementById('curry').children[0].setAttribute('src', curry.playerimgurl);
        document.getElementById('curry').children[1].innerHTML = curry.name;
        document.getElementById('curry').children[2].innerHTML = curry.position;
        document.getElementById('curry').children[3].children[0].setAttribute('src', curry.teamimgurl);
        document.getElementById('curry').children[3].children[1].innerHTML = curry.team;

        document.getElementById('abc').children[0].setAttribute('src', abc.playerimgurl);
        document.getElementById('abc').children[1].innerHTML = abc.name;
        document.getElementById('abc').children[2].innerHTML = abc.position;
        document.getElementById('abc').children[3].children[0].setAttribute('src', abc.teamimgurl);
        document.getElementById('abc').children[3].children[1].innerHTML = abc.team;

    </script>

</body>

</html>